<template>
  <div style="height: 100%;overflow-y: auto;background-color: #bde0ff;">
    <div class="contentBg">
      <div style="width: 1200px;margin: 0 auto;margin-bottom: 40px;">
        <div style="padding-top: 75px;">
          <el-row :gutter="15">
            <el-col :span="12">
              <div class="welcomeBlock" style="border-radius: 4px;">
                <h3>WELCOME</h3>
                <span>您好！{{userInfo.userName}}/{{userInfo.userCorpName}}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="height: 110px;">
                <el-carousel :interval="5000" arrow="always" :autoplay="false" height="110px">
                  <el-carousel-item v-for="item in 3" :key="item" style="background-color: #fff;">
                    <div style="padding: 12px 70px;box-sizing: border-box;background-color: #fff;border-radius: 4px;">
                       <el-row>
                        <el-col :span="12">
                          <div class="carouselItem">
                            <!--<i></i>-->
                            <!--<a class="carouselItemA"></a>-->
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="12">
              <div class="newsBlock importExportTabs" style="margin-top: 15px;margin-bottom: 15px;">
                <el-tabs v-model="activeNameBlockT" @tab-click="handleClickBlckT">
                  <el-tab-pane label="待办事项" name="myToDo">
                    <div class="dbsxImg" v-if="dbsxArr.length === 0">
                      <img src="../../assets/importExportImg/default_blank_70_60.jpg" alt="">
                      <span>无内容</span>
                    </div>
                    <div class="dbsxList" v-else style="margin-top: 16px;">
                      <div class="newsBlockItem" v-for="(item, index) of dbsxArr" :key="item.workitemInsId" @click="toAuditPage('toDo', item)">
                        <span>{{item.busiTitle | nameShow}}</span>
                        <span>{{item.arriveTime}}</span>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="已办事项" name="myHasToDo">
                    <div class="dbsxImg" v-if="ybsxArr.length === 0">
                      <img src="../../assets/importExportImg/default_blank_70_60.jpg" alt="">
                      <span>无内容</span>
                    </div>
                    <div class="dbsxList" v-else style="margin-top: 16px;">
                      <div class="newsBlockItem" v-for="(item, index) of ybsxArr" :key="item.workitemInsId" @click="toAuditPage('hasToDo', item)">
                        <span>{{item.busiTitle | nameShow}}</span>
                        <span>{{item.completeTime}}</span>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
                <a href="javascript:;" class="moreSize listMore" @click="toAuditMore">更多</a>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="newsBlock lastNewsBlock" style="margin-top: 15px;">
                <div class="newsBlockTitle">
                  <span>常用工具</span>
                  <a href="javascript:;" class="moreSize" @click="getUtilityUserMenu()">定制</a>
                </div>
                <div class="newsBlockList">
                  <el-row>
                    <el-col :span="24">
                      <div>
                        <div class="commonList" v-for="(item, index) of commonToolsData" v-if="index < 8" :key="index" @click="Menuskip(item)">
                          <img src="../../assets/importExportImg/01.jpg" alt="">
                          <span class="commonListSpan">{{item.title}}</span>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="newsBlock">
                <div class="newsBlockTitle">
                  <span>公司新闻</span>
                  <a href="javascript:;" class="moreSize">更多</a>
                </div>
                <div class="newsBlockList">
                  <el-row :gutter="35">
                    <el-col :span="12">
                      <div style="margin-top: 16px;">
                        <div class="newsBlockItem" v-for="(item, index) of newsData" :key="index + 'news'">
                          <span>{{item.name | nameShow}}</span>
                          <span>{{item.time}}</span>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div style="position: relative;margin-top: 20px;">
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="12">
              <div class="newsBlock importExportTabs" style="margin-top: 15px;">
                <el-tabs v-model="activeNameBlockF" @tab-click="handleClickBlckF">
                  <el-tab-pane label="公司文件" name="first">
                    <div style="margin-top: 16px;">
                      <div class="newsBlockItem" v-for="(item, index) of newsDataCom" :key="index + 'com'">
                        <span>{{item.name | nameShowCom}}</span>
                        <span>{{item.time}}</span>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="集团公司文件" name="second">集团公司文件</el-tab-pane>
                </el-tabs>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="newsBlock importExportTabs" style="margin-top: 15px;">
                <el-tabs v-model="activeNameBlockS" @tab-click="handleClickBlckS">
                  <el-tab-pane label="通知公告" name="first">
                    <div style="margin-top: 16px;">
                      <div class="newsBlockItem" v-for="(item, index) of newsDataNotice" :key="index + 'com'">
                        <span>{{item.name | nameShowCom}}</span>
                        <span>{{item.time}}</span>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="集团公司文件" name="second">集团公司通知公告</el-tab-pane>
                </el-tabs>
                <a href="javascript:;" class="moreSize listMore">更多</a>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="8">
              <div class="newsBlock lastNewsBlock" style="margin-top: 15px;">
                <div class="newsBlockTitle">
                  <span>公司新闻</span>
                  <a href="javascript:;" class="moreSize">更多</a>
                </div>
                <div class="newsBlockList">
                  <el-row>
                    <el-col :span="24">
                      <div style="margin-top: 16px;">
                        <div class="newsBlockItem" v-for="(item, index) of newsDataLast" :key="index + 'last'">
                          <span>{{item.name | nameShowComLast}}</span>
                          <span>{{item.time}}</span>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="newsBlock lastNewsBlock" style="margin-top: 15px;">
                <div class="newsBlockTitle">
                  <span>价格信息</span>
                </div>
                <div class="newsBlockList" style="margin-top: 12px">
                  <line-chart :chart-data="lineChartData"></line-chart>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="newsBlock lastNewsBlock" style="margin-top: 15px;">
                <div class="newsBlockTitle">
                  <span>常用系统链接</span>
                </div>
                <div class="newsBlockList" style="margin-top: 15px;">
                  <div class="commLink">
                    <el-select v-model="valueLinkOne" placeholder="请选择">
                      <el-option
                        v-for="item in optionsLinkOne"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="commLink">
                    <el-select v-model="valueLinkTwo" placeholder="请选择">
                      <el-option
                        v-for="item in optionsLinkTwo"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="commLink">
                    <el-select v-model="valueLinkThree" placeholder="请选择">
                      <el-option
                        v-for="item in optionsLinkThree"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="scecialInfo">
      <div style="width: 1200px;margin: 0 auto;">
        <h3>专题信息</h3>
        <div class="scecialInfoImgList">
          <div class="scecialInfoImgItem">
            <!--<img src="" alt="">-->
            <!--<span></span>-->
          </div>
          <div class="scecialInfoImgItem">
            <!--<img src="" alt="">-->
            <!--<span></span>-->
          </div>
          <div class="scecialInfoImgItem">
            <!--<img src="" alt="">-->
            <!--<span></span>-->
          </div>
        </div>
      </div>
    </div>
    <div class="importExportFooter">
      <div style="width: 1200px;margin: 0 auto;">
        <div class="footerList">
          <div class="footerItem">
            <p>建议使用谷歌浏览器浏览本系统，获得更好用户体验</p>
            <p>地址：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            <p>邮编：XXXXXX</p>
          </div>
          <div class="footerItem rightQrcode">
          </div>
        </div>
        <p class="copy">XXXXXXXXX 版权所有&copy;2022.Apr</p>
      </div>
    </div>
    <!--常用工具列表信息-->
    <el-dialog title="常用工具列表" :visible.sync="utilityUserMenuIsDisplay" width="50%" :close-on-click-modal="false" :destroy-on-close="true"
               v-if="utilityUserMenuIsDisplay" top="30px" custom-class="myDialog">
      <utilityUserMenuList :tableSelectData="tableSelectData" @changeUtilityCloseDialog="changeUtilityCloseDialog" @UtilityUserMenusavesuccess="UtilityUserMenusavesuccess"></utilityUserMenuList>
    </el-dialog>
  </div>
</template>
<script>
import SHOWCAL from '@/utils/getLunarCalendar'
import {
  selectLoginLog
} from '@/api/systemManage/newLoginLogManagement'
import router from '@/router'
import { setNav } from '@/utils/auth'
import LineChart from './components/LineChart'
import Cookies from 'js-cookie'
import utilityUserMenuList from '@/views/dashboard/components/utilityUserMenuList.vue'
// 引入base64
const Base64 = require('js-base64').Base64

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  name: 'dashboardComp',
  data() {
    return {
      commonToolsData: [
        // {
        //   icon: '../../assets/importExportImg/01.jpg',
        //   name: 'PAYMENT(SG)'
        // },
        // {
        //   icon: '../../assets/importExportImg/02.jpg',
        //   name: '办公用品申请'
        // },
        // {
        //   icon: '../../assets/importExportImg/03.jpg',
        //   name: '保函管理'
        // },
        // {
        //   icon: '../../assets/importExportImg/04.jpg',
        //   name: '备用金还款'
        // },
        // {
        //   icon: '../../assets/importExportImg/05.jpg',
        //   name: '备用金借款'
        // },
        // {
        //   icon: '../../assets/importExportImg/06.jpg',
        //   name: '采办计划'
        // },
        // {
        //   icon: '../../assets/importExportImg/07.jpg',
        //   name: '采办结果'
        // },
        // {
        //   icon: '../../assets/importExportImg/08.jpg',
        //   name: '更多'
        // }
      ],
      dbsxArr: [],
      ybsxArr: [],
      utilityUserMenuIsDisplay: false,
      tableSelectData: [],
      menuData: [
        {
          name: '组织机构管理',
          subsys_id: '261f09c78ba74173bf986d06cd1c42d9',
          icon: 'zjjgIcon'
        },
        {
          name: '兼职管理',
          subsys_id: '261f09c78ba74173bf986d06cd1c42d9',
          icon: 'jzIcon'
        },
        {
          name: '用户管理',
          subsys_id: '261f09c78ba74173bf986d06cd1c42d9',
          icon: 'yhIcon'
        },
        {
          name: '子系统管理',
          subsys_id: 'cdfb84f757c34008a556fe14c8949d05',
          icon: 'zxtIcon'
        },
        {
          name: '菜单管理',
          subsys_id: 'cdfb84f757c34008a556fe14c8949d05',
          icon: 'cdIcon'
        },
        {
          name: '角色管理',
          subsys_id: 'cdfb84f757c34008a556fe14c8949d05',
          icon: 'jsIcon'
        }
      ],
      timeHours: this.dataForm(new Date(), 'hours'),
      timeDay: this.dataForm(new Date(), 'day'),
      timeYears: this.dataForm(new Date(), 'years'),
      weekNum: '',
      periodD: '',
      periodCardNum: '',
      getLunar: SHOWCAL(),
      weekday: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      userInfo: {
        userId: this.$store.state.user.userid,
        userName: this.$store.state.user.name,
        userOrgId: this.$store.state.user.orgId,
        userOrgName: this.$store.state.user.org_name,
        userCorpId: this.$store.state.user.corpId,
        userCorpName: this.$store.state.user.corpName,
        email: this.$store.state.user.email,
        remarks: this.$store.state.user.remarks
      },
      postList: {
        condition: {
          username: {
            property: 'username',
            value: '',
            type: 'LIKE'
          },
          name: {
            property: 'name',
            value: '',
            type: 'LIKE'
          }
        },
        sort: [{
          direction: 'DESC',
          property: 'logintime'
        }],
        rowBounds: {
          offset: 0,
          limit: 5
        }
      },
      recordList: [],
      optionsLinkOne: [
        {
          value: '0',
          label: '机关单位'
        }, {
          value: '1',
          label: '双皮奶'
        }, {
          value: '2',
          label: '蚵仔煎'
        }, {
          value: '3',
          label: '龙须面'
        }, {
          value: '4',
          label: '北京烤鸭'
        }
      ],
      valueLinkOne: '机关单位',
      optionsLinkTwo: [
        {
          value: '0',
          label: '内部单位'
        }, {
          value: '1',
          label: '双皮奶'
        }, {
          value: '2',
          label: '蚵仔煎'
        }, {
          value: '3',
          label: '龙须面'
        }, {
          value: '4',
          label: '北京烤鸭'
        }
      ],
      valueLinkTwo: '内部单位',
      optionsLinkThree: [
        {
          value: '0',
          label: '常用链接'
        }, {
          value: '1',
          label: '双皮奶'
        }, {
          value: '2',
          label: '蚵仔煎'
        }, {
          value: '3',
          label: '龙须面'
        }, {
          value: '4',
          label: '北京烤鸭'
        }
      ],
      valueLinkThree: '常用链接',
      lineChartData: lineChartData.newVisitis,
      imgSize: '',
      activeNameBlockF: 'first',
      activeNameBlockS: 'first',
      activeNameBlockT: 'myToDo',
      newsData: [
        //
      ],
      newsDataCom: [
        //
      ],
      newsDataNotice: [
        //
      ],
      newsDataLast: [
        //
      ]
    }
  },
  components: {
    LineChart,
    utilityUserMenuList
  },
  filters: {
    nameShow(val) {
      // console.log(val.length)
      if (val.length > 30) {
        return val.slice(0, 30) + '...'
      } else {
        return val
      }
    },
    nameShowCom(val) {
      // console.log(val.length)
      if (val.length > 35) {
        return val.slice(0, 35) + '...'
      } else {
        return val
      }
    },
    nameShowComLast(val) {
      // console.log(val.length)
      if (val.length > 22) {
        return val.slice(0, 22) + '...'
      } else {
        return val
      }
    }
  },
  watch: {
    //
  },
  mounted() {
    let _this = this
    this.timer = setInterval(() => {
      _this.timeHours = _this.dataForm(new Date(), 'hours')
      _this.timeDay = _this.dataForm(new Date(), 'day')
      _this.timeYears = _this.dataForm(new Date(), 'years')
      this.weekDayFun()
      this.periodTime()
    }, 1000)
    this.fetchData()

    // 获取待办
    this.getTodoList()
    //获取常用工具
    this.getUtilityList()
  },
  methods: {
    handleClickBlckF(tab, event) { // 公司文件
      console.log(tab, event)
    },
    handleClickBlckS(tab, event) { // 通知公告
      console.log(tab, event)
    },
    handleClickBlckT(tab, event) { // 待办事项
      // console.log(tab, event)
      if (tab.name === 'myToDo') {
        this.getTodoList()
      } else if (tab.name === 'myHasToDo') {
        this.getHasTodoList()
      }
    },
    fetchData() {
      selectLoginLog(this.postList).then(res => {
        this.recordList = res.data.data.records
      }).catch((err) => {
        console.log(err)
      })
    },
    periodTime() {
      let periodDate = new Date()
      let periodHour = periodDate.getHours()
      if (periodHour < '12') {
        this.periodD = 'A M'
        this.periodCardNum = '上午'
      } else {
        this.periodD = 'P M'
        this.periodCardNum = '下午'
      }
    },
    weekDayFun() {
      const myDate = new Date()
      const myWeek = myDate.getDay()
      this.weekNum = this.weekday[myWeek]
    },
    dataForm(date, time) {
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      let minute = date.getMinutes()
      minute = minute < 10 ? ('0' + minute) : minute
      // return y + '-' + m + '-' + d + ' ' + h + ':' + minute
      if (time === 'years') {
        return y + '-' + m
      } else if (time === 'day') {
        return d
      } else if (time === 'hours') {
        return h + ':' + minute
      }
    },
    getTodoList() { // 获取待办
      let queryArgs = {
        condition: [],
        sort: [
          {
            property: 'arriveTime',
            direction: 'DESC'
          }
        ],
        rowBounds: {
          offset: 0,
          limit: 8
        },
        toDoParams: {
          'userId': this.userInfo.userId,
          'orgId': this.userInfo.userOrgId
        },
        agentInfoList: []
      }
      // console.log('getTodoList', queryArgs)
      // this.$store.dispatch('WfProcessToDoList', queryArgs).then(res => {
      //   let records = res.data.records
      //   if (records) {
      //     records.forEach((item, index) => {
      //       // 格式化时间
      //       item.arriveTime = this.timeFormat(item.arriveTime, 'date')
      //       // item.completeTime = this.timeFormat(item.completeTime)
      //     })
      //   }
      //   // this.dbsxArr = records
      // }).catch(() => {

      // })
    },
    getHasTodoList() { // 获取待办
      let queryArgs = {
        condition: [],
        sort: [
          {
            property: 'completeTime',
            direction: 'DESC'
          }
        ],
        rowBounds: {
          offset: 0,
          limit: 8
        },
        hasToDoParams: {
          'userId': this.userInfo.userId,
          'orgId': this.userInfo.userOrgId
        }
      }
      // console.log('getTodoList', queryArgs)
      // this.$store.dispatch('WfProcessHasToDoList', queryArgs).then(res => {
      //   let records = res.data.records
      //   if (records) {
      //     records.forEach((item, index) => {
      //       // 格式化时间
      //       item.completeTime = this.timeFormat(item.completeTime, 'date')
      //       // item.completeTime = this.timeFormat(item.completeTime)
      //     })
      //   }
      //   // this.ybsxArr = records
      // }).catch(() => {

      // })
    },
    getUtilityList() { // 获取常用工具列表
      let queryArgs = {
        condition: [
          {property: "role_status", value: 0, type: "EQ"},
          {property: "userId", value: this.userInfo.userId, type: "EQ"}
        ],
        sort: [
          // {
          //   property: 'parentId',
          //   direction: 'ASC'
          // }
          {
            property: 'sort',
            direction: 'ASC'
          }
        ]
        // rowBounds: {
        //   offset: 0,
        //   limit: 8
        // }
        // hasToDoParams: {
        //   'userId': this.userInfo.userId,
        //   'orgId': this.userInfo.userOrgId
        // }
      }
      // console.log('getTodoList', queryArgs)
      this.$store.dispatch('utilityListSelect', queryArgs).then(res => {
        let records = res.data.records
        if (records) {
          records.forEach((item, index) => {
            // 格式化时间
            // item.completeTime = this.timeFormat(item.completeTime, 'date')
            // item.completeTime = this.timeFormat(item.completeTime)
          })
        }
        this.commonToolsData = records
        this.tableSelectData = records
      }).catch(() => {

      })
    },
    getUtilityUserMenu() {
      this.utilityUserMenuIsDisplay = true
    },
    changeUtilityCloseDialog() {
      this.utilityUserMenuIsDisplay = false
    },
    UtilityUserMenusavesuccess() {
      this.utilityUserMenuIsDisplay = false
      this.getUtilityList()
    },
    Menuskip(item){
      // 获取子系统
      let navArr = this.$store.state.antv.navArr
      let myIndex
      console.log(item)
      navArr.forEach((val, index) => {
        if(val.subsys_id === item.subsysid){
          myIndex = index
        }
      })
      this.$store.dispatch('ChangeMenuLoading', true)
      this.$store.dispatch('ChangeActiveMenuIndex', myIndex).then(() => {
        // this.data[index].curPath = this.data[index].curPath || item.path
        this.$store.dispatch('delAllViews').then((visitedViews) => {})
        this.$router.push('/')
        this.$store.dispatch('GenerateRoutes', item.subsysid).then(_ => {
          router.addRoutes(this.$store.getters.addRouters) // 动态添加可访问路由表
          // this.$router.push({ path: this.data[index].curPath })
          this.$nextTick(() => {
            this.$store.dispatch('ChangeMenuLoading', false)
            this.$router.push({
              name: item.name
            })
          })
        })
      }).catch(_ => {
        this.$store.dispatch('delAllViews').then((visitedViews) => {})
        this.$router.push('/')
        this.$store.dispatch('ChangeMenuLoading', false)
        this.$router.push({
          name: item.name
        })
      })
    },
    toAuditPage(type, workitem) {
      let queryArgs = {
        taskType: workitem.taskType,
        handlingType: workitem.handlingType,
        workitemInsId: workitem.workitemInsId,
        busiId: workitem.busiId,
        busiTypeId: workitem.busiTypeId,
        // procInstanceId: workitem.procInstanceId,
        // activityInsId: workitem.activityInsId,
        // processId: workitem.processId,
        // processVer: workitem.processVer,
        activityId: workitem.activityId,
        activityName: workitem.activityName,
        extProp: workitem.extProp
      }
      let routerQuery = {
        queryArgs: Base64.encode(JSON.stringify(queryArgs))
      }
      if (type === 'toDo') {
        //
        this.$router.push({ name: 'busiWorkFlowToDoDetail', params: { id: workitem.workitemInsId }, query: routerQuery })
      } else if (type === 'hasToDo') {
        //
        this.$router.push({ name: 'busiWorkFlowHasToDoDetail', params: { id: workitem.busiId }, query: routerQuery })
      }
    },
    toAuditMore() {
      this.$router.push({ name: 'workFlowTaskList' })
    },
    timeFormat(time, type) {
      let tempDate = ''
      let tempTime = ''
      try {
        tempDate = time.substring(0, 4) + '-' + time.substring(4, 6) + '-' + time.substring(6, 8)

        if (time && time.length > 8) {
          tempTime = time.substring(8, 10) + ':' + time.substring(10, 12) + ':' + time.substring(12, 14)
        }
        if (type === 'all') {
          return tempDate + ' ' + tempTime
        } else if (type === 'date') {
          return tempDate
        } else if (type === 'time') {
          return tempTime
        }
      } catch (e) {
        //
        console.info(e)
      }
      return time
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>
<style scoped>
  .contentBg{
    background: #bde0ff url("../../assets/importExportImg/portalbg_1920_444.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
  }
  .scecialInfo{
    width: 100%;
    background-color: #ffffff;
    height: 386px;
  }
  .scecialInfo h3{
    padding: 40px 0;
    font-size: 20px;
    font-weight: normal;
  }
  .scecialInfoImgList{
    display: flex;
    justify-content: space-between;
  }
  .scecialInfoImgItem{
    text-align: center;
  }
  .scecialInfoImgItem img{
    width: 365px;
    height: 180px;
  }
  .scecialInfoImgItem span{
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
  }
  .scecialInfoImgItem:first-child{
    margin-left: 0;
  }
  .importExportFooter{
    width: 100%;
    background-color: #404040;
  }
  .footerList{
    display: flex;
    justify-content: space-between;
  }
  .footerItem{
    margin-top: 20px;
  }
  .footerItem p{
    color: #aaaaaa;
    line-height: 40px;
  }
  .rightQrcode{
    display: flex;
    margin-top: 40px;
  }
  .rightQrcode p{
    line-height: initial;
    padding-top: 10px;
  }
  .rightQrcode p:first-child{
    margin-top: 0;
  }
  .copy{
    margin-top: 40px;
    color: #aaaaaa;
    line-height: 58px;
    border-top:1px solid #535353;
    text-align: center;
  }
  .personalCard{
    width: 100%;
    height: 360px;
    padding: 0 24px;
    box-sizing: border-box;
    background: url("../../assets/homePageImg/personBg.jpg") no-repeat;
    background-size: 100% 100%;
  }
  .perCardTitle{
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
  }
  .perCardTitle h3{
    font-size: 20px;
    color: #ffffff;
    font-weight: normal;
  }
  .perCardTitle span{
    font-size: 12px;
    color: #ffffff;
    display: inline-block;
    line-height: 23px;
  }
  .perCardContent{
    margin-top: 90px;
    padding-bottom: 35px;
    border-bottom: 1px solid #ffffff;
  }
  .perConName i{
    width: 26px;
    height: 30px;
    display: inline-block;
    background: url("../../assets/homePageImg/userIcon.png") no-repeat;
    background-size: 100% 100%;
  }
  .perConName span{
    font-size: 16px;
    color: #ffffff;
    display: inline-block;
    padding-left: 10px;
  }
  .perCardContent p{
    font-size: 14px;
    color: #ffffff;
    margin-top: 15px;
  }
  .perCardInfo{
    margin-top: 15px;
  }
  .perCardInfo{
    font-size: 12px;
    color: #ffffff;
  }

  .quickEntry{
    padding: 0 24px;
    background: #ffffff;
  }
  .quickEntry h3, .loginRecord h3{
    font-size: 16px;
    color: #333333;
    padding-top: 28px;
  }
  .cardRow{
    margin-top: 24px;
  }
  .quickCard{
    width: 100%;
    height: 108px;
    border: 1px solid #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .3s;
    box-shadow: 4px 5px 8px #f5f7fa;
    margin-bottom: 24px;
  }
  .quickCard:hover{
    background-color: #e4f7fc;
  }
  .quickCard span{
    display: inline-block;
    width: 110px;
    font-size: 14px;
  }
  .quickCard i{
    display: inline-block;
    width: 50px;
    height: 50px;
  }
  .zjjgIcon{
    background: url("../../assets/homePageImg/zjjg.png") no-repeat center;
  }
  .jzIcon{
    background: url("../../assets/homePageImg/jz.png") no-repeat center;
  }
  .yhIcon{
    background: url("../../assets/homePageImg/yh.png") no-repeat center;
  }
  .zxtIcon{
    background: url("../../assets/homePageImg/zxt.png") no-repeat center;
  }
  .cdIcon{
    background: url("../../assets/homePageImg/cd.png") no-repeat center;
  }
  .jsIcon{
    background: url("../../assets/homePageImg/js.png") no-repeat center;
  }
  .loginRecord{
    margin-top: 33px;
    box-sizing: border-box;
    background-color: #ffffff;
  }
  .loginRecord h3{
    padding: 28px 24px 0 24px;
  }
  .loginRecord .litSpan{
    font-size: 12px;
    color: #787878;
    display: inline-block;
    margin: 15px 0;
    padding: 0 24px;
  }
  .recordList{
    padding-bottom:  28px;
  }
  .recordItem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    border-bottom: 1px solid #f7f7f7;
    transition: all .3s;
  }
  .recordItem:hover{
    background-color: #e4f7fc;
  }
  .recordName{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .recordName img{
    display: inline-block;
    width: 36px;
    height: 34px;
  }
  .recordName span{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    margin-left: 15px;
  }
  .recordTime{
    font-size: 14px;
    color: #858585;
  }

  .calendar{
    padding: 0 24px;
    height: 356px;
    background-color: #ffffff;
  }
  .calendar h3{
    font-size: 16px;
    color: #333333;
    padding-top: 28px;
  }
  .calendarCon{
    height: 296px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .calendarCard{
    width: 33%;
    height: 200px;
    box-shadow: 0px 0px 15px #c4c3c3;
    border-radius: 14px;
  }
  .calendarCard span{
    width: 100%;
    display: inline-block;
  }
  .calendarCard .year{
    font-size: 22px;
    color: #79859c;
    line-height: 55px;
    text-align: center;
    border-bottom: 2px solid #f6f6f6;
  }
  .calendarCard .day{
    font-size: 76px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    height: 140px;
    justify-content: center;
    color: #79859c;
  }
  .week{
    display: block;
    font-size: 32px;
    color: #f1635f;
  }
  .midInfoCalendar{
    display: block;
    font-size: 24px;
    color: #79859c;
    margin: 26px 0;
  }
  .timeInfo{
    display: inline-block;
    width: 158px;
    height: 50px;
    background: url("../../assets/homePageImg/timeIcon.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .calendarInfo{
    margin-left: 40px;
    width: 40%;
  }
  .timeInfoLeft{
    color: #79859c;
    font-size: 26px;
    display: inline-block;
    margin-left: 24px;
  }
  .timeInfoRight{
    margin-right: 20px;
    margin-top: -2px;
  }
  .timeInfoRight span{
    font-size: 14px;
    display: flex;
    color: #79859c;
    justify-content: center;
  }
</style>
<style>
  .newsBlock{
    width: 100%;
    height: 350px;
    padding: 20px 18px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #ffffff;
  }
  .lastNewsBlock{

  }
  .newsBlockItem{
    display: flex;
    justify-content: space-between;
  }
  .newsBlockTitle{
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding-bottom: 19px;
    border-bottom: 1px solid #ebebeb;
  }
  .newsBlockTitle span{
    font-size: 16px;
    font-weight: 700;
    color: #666;
  }
  .newsBlockItem{
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all .3s;
  }
  .moreSize{
    display: inline-block;
    border: 1px solid #2a70c4;
    color: #2a70c4;
    padding: 5px 10px;
    text-align: center;
    font-size: 12px;
    transition: all .3s;
  }
  .moreSize:hover{
    color: #ffffff;
    background-color: #2a70c4;
  }
  .newsBlockItem:hover{
    color: #2a70c4;
  }
  .importExportTabs{
    position: relative;
  }
  .importExportTabs .listMore{
    position: absolute;
    top: 22px;
    right: 18px;
  }

</style>
